React memo: Komponentlarni Eslab Qolish va Render Optimizatsiyasini O'zlashtirish

React dasturlash olamida unumdorlik eng muhim omil hisoblanadi. Ilovalar murakkablashgani sari, silliq va samarali renderlashni ta'minlash tobora muhim ahamiyat kasb etmoqda. Bunga erishish uchun React dasturchisining vositalaridan biri bu React.memo. Ushbu blog posti React.memo ning nozik jihatlariga chuqur kirib boradi, uning maqsadi, ishlatilishi va render unumdorligini optimallashtirish bo'yicha eng yaxshi amaliyotlarni o'rganadi.

Komponentlarni Eslab Qolish (Memoization) Nima?

Komponentlarni eslab qolish (memoization) - bu komponentning proplari o'zgarmaganida uning keraksiz qayta render qilinishining oldini oluvchi optimallashtirish texnikasi. React ma'lum bir proplar to'plami uchun render qilingan natijani yodda saqlab, agar proplar o'zgarmasa, komponentni qayta renderlashni o'tkazib yuborishi mumkin. Bu, ayniqsa, hisoblash jihatidan qimmat bo'lgan yoki tez-tez qayta renderlanadigan komponentlar uchun sezilarli unumdorlik o'sishiga olib keladi.

Eslab qolishsiz, React komponentlari ota-ona komponenti qayta renderlanganda, hatto bola komponentga uzatilgan proplar o'zgarmagan bo'lsa ham, qayta renderlanadi. Bu komponentlar daraxti bo'ylab qayta renderlashlar kaskadiga olib kelishi va ilovaning umumiy unumdorligiga salbiy ta'sir ko'rsatishi mumkin.

React.memo Bilan Tanishtiruv

React.memo - bu React tomonidan taqdim etilgan, funksional komponentni eslab qoladigan yuqori tartibli komponent (HOC - higher-order component). U React'ga komponentning natijasini ma'lum bir proplar to'plami uchun "eslab qolishini" va faqat proplar haqiqatan ham o'zgarganda komponentni qayta renderlashini aytadi.

React.memo Qanday Ishlaydi

React.memo joriy proplarni avvalgi proplar bilan yuzaki (shallowly) taqqoslaydi. Agar proplar bir xil bo'lsa (yoki maxsus taqqoslash funksiyasi true qaytarsa), React.memo komponentni qayta renderlashni o'tkazib yuboradi. Aks holda, u komponentni odatdagidek qayta renderlaydi.

React.memo dan Oddiy Foydalanish

React.memo dan foydalanish uchun shunchaki funksional komponentingizni u bilan o'rab qo'ying:

            import React from 'react';

const MyComponent = (props) => {
  // Komponent mantig'i
  return (
    <div>
      {props.data}
    </div>
  );
};

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

Ushbu misolda, MyComponent faqat data propi o'zgarganda qayta renderlanadi. Agar data propi o'zgarishsiz qolsa, React.memo komponentning qayta renderlanishiga yo'l qo'ymaydi.

Yuzaki Taqqoslashni Tushunish

Yuqorida aytib o'tilganidek, React.memo proplarni yuzaki taqqoslashni amalga oshiradi. Bu shuni anglatadiki, u faqat proplar sifatida uzatilgan obyektlar va massivlarning yuqori darajadagi xususiyatlarini taqqoslaydi. U bu obyektlar yoki massivlarning ichidagi tarkibni chuqur taqqoslamaydi.

Yuzaki taqqoslash obyektlar yoki massivlarga bo'lgan havolalar (references) bir xil ekanligini tekshiradi. Agar siz proplar sifatida kod ichida yaratilgan (inline) yoki o'zgartirilgan (mutated) obyektlar yoki massivlarni uzatayotgan bo'lsangiz, React.memo ularni, hatto tarkibi bir xil bo'lsa ham, har xil deb hisoblashi mumkin, bu esa keraksiz qayta renderlarga olib keladi.

Misol: Yuzaki Taqqoslashning Kamchiliklari

            import React, { useState } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // Bu MyComponent-ni har safar qayta render qilishiga sabab bo'ladi
    // chunki har bir bosishda yangi obyekt yaratiladi.
    setData({ ...data });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Ma'lumotni Yangilash</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Ushbu misolda, data obyektidagi name xususiyati o'zgarmasa ham, tugma har safar bosilganda MyComponent qayta renderlanadi. Buning sababi, har bir bosishda spread operatori ({ ...data }) yordamida yangi obyekt yaratiladi va bu boshqa havolaga (reference) olib keladi.

Maxsus Taqqoslash Funksiyasi

Yuzaki taqqoslashning cheklovlarini yengish uchun React.memo ikkinchi argument sifatida maxsus taqqoslash funksiyasini taqdim etishga imkon beradi. Bu funksiya ikkita argument qabul qiladi: avvalgi proplar va keyingi proplar. U proplar teng bo'lsa (ya'ni komponent qayta renderlanishi kerak emas) true, aks holda false qaytarishi kerak.

Sintaksis

            React.memo(MyComponent, (prevProps, nextProps) => {
  // Maxsus taqqoslash mantig'i
  return true; // Qayta render qilishni oldini olish uchun true, ruxsat berish uchun false qaytaring
});

            

              
                Copy
              
            
          

Misol: Maxsus Taqqoslash Funksiyasidan Foydalanish

            import React, { useState, useCallback } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
}, (prevProps, nextProps) => {
  // Faqat 'name' xususiyati o'zgarganda qayta render qiling
  return prevProps.data.name === nextProps.data.name;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // Bu MyComponent-ni faqat 'name' o'zgarganda qayta render qilishiga sabab bo'ladi
    setData({ ...data, age: data.age + 1 });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Ma'lumotni Yangilash</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Ushbu misolda, maxsus taqqoslash funksiyasi faqat data obyektining name xususiyati o'zgarganligini tekshiradi. Shuning uchun, MyComponent faqat name o'zgarganda qayta renderlanadi, hatto data obyektidagi boshqa xususiyatlar yangilangan bo'lsa ham.

React.memoni Qachon Ishlatish Kerak

React.memo kuchli optimallashtirish vositasi bo'lishi mumkin bo'lsa-da, uni oqilona ishlatish muhimdir. Uni ilovangizdagi har bir komponentga qo'llash, yuzaki taqqoslashning qo'shimcha xarajatlari tufayli aslida unumdorlikka zarar etkazishi mumkin.

React.memo dan quyidagi hollarda foydalanishni o'ylab ko'ring:

• Tez-tez qayta renderlanadigan komponentlar: Agar komponent proplari o'zgarmagan bo'lsa ham tez-tez qayta renderlansa, React.memo keraksiz qayta renderlar sonini sezilarli darajada kamaytirishi mumkin.
• Hisoblash jihatidan qimmat komponentlar: Agar komponent murakkab hisob-kitoblarni amalga oshirsa yoki katta hajmdagi ma'lumotlarni renderlasa, keraksiz qayta renderlarning oldini olish unumdorlikni oshirishi mumkin.
• Sof (Pure) komponentlar: Agar komponentning natijasi faqat uning proplari bilan aniqlansa, React.memo yaxshi tanlovdir.
• Tez-tez qayta renderlanishi mumkin bo'lgan ota-ona komponentlardan proplar qabul qilinganda: Keraksiz qayta renderlanishni oldini olish uchun bola komponentni memoizatsiya qiling.

Quyidagi hollarda React.memo dan foydalanishdan saqlaning:

• Kamdan-kam qayta renderlanadigan komponentlar: Yuzaki taqqoslashning qo'shimcha xarajatlari memoizatsiya afzalliklaridan ustun bo'lishi mumkin.
• Tez-tez o'zgaruvchan proplarga ega komponentlar: Agar proplar doimiy ravishda o'zgarib tursa, React.memo ko'p qayta renderlarning oldini olmaydi.
• Minimal renderlash mantig'iga ega oddiy komponentlar: Unumdorlik o'sishi ahamiyatsiz bo'lishi mumkin.

React.memo ni Boshqa Optimizatsiya Texnikalari Bilan Birlashtirish

React.memo maksimal unumdorlikka erishish uchun ko'pincha boshqa React optimallashtirish texnikalari bilan birgalikda ishlatiladi.

useCallback

useCallback - bu funksiyani eslab qoladigan React hooki. U funksiyaning eslab qolingan versiyasini qaytaradi va bu versiya faqat uning bog'liqliklaridan biri o'zgarganda o'zgaradi. Bu, ayniqsa, memoizatsiya qilingan komponentlarga funksiyalarni prop sifatida uzatishda foydalidir.

useCallback siz, ota-ona komponentining har bir renderida, hatto funksiya mantig'i o'zgarmasa ham, yangi funksiya nusxasi yaratiladi. Bu React.memo ning funksiya propini o'zgargan deb hisoblashiga va keraksiz qayta renderlarga olib kelishiga sabab bo'ladi.

Misol: useCallback dan React.memo Bilan Foydalanish

            import React, { useState, useCallback } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <button onClick={props.onClick}>Meni Bosing</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <MyComponent onClick={handleClick} />
      <p>Hisob: {count}</p>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Ushbu misolda, useCallback handleClick funksiyasining faqat count holati o'zgarganda qayta yaratilishini ta'minlaydi. Bu count holati yangilanishi tufayli ota-ona komponenti qayta renderlanganda MyComponent ning keraksiz qayta renderlanishining oldini oladi.

useMemo

useMemo - bu qiymatni eslab qoladigan React hooki. U faqat bog'liqliklaridan biri o'zgarganda o'zgaradigan eslab qolingan qiymatni qaytaradi. Bu memoizatsiya qilingan komponentlarga prop sifatida uzatiladigan murakkab hisob-kitoblar yoki hosilaviy ma'lumotlarni eslab qolish uchun foydalidir.

useCallback ga o'xshab, useMemo siz murakkab hisob-kitoblar har bir renderda, hatto kiritilgan qiymatlar o'zgarmagan bo'lsa ham, qayta bajariladi. Bu unumdorlikka sezilarli ta'sir ko'rsatishi mumkin.

Misol: useMemo dan React.memo Bilan Foydalanish

            import React, { useState, useMemo } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data}</div>;
});

const ParentComponent = () => {
  const [input, setInput] = useState('');

  const data = useMemo(() => {
    // Murakkab hisoblashni simulyatsiya qilish
    console.log('Ma\'lumotlarni hisoblash...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return input + result;
  }, [input]);

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <MyComponent data={data} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Ushbu misolda, useMemo data qiymatining faqat input holati o'zgarganda qayta hisoblanishini ta'minlaydi. Bu MyComponent ning keraksiz qayta renderlanishining oldini oladi va ota-ona komponentining har bir renderida murakkab hisob-kitobning qayta bajarilishiga yo'l qo'ymaydi.

Amaliy Misollar va Keyslar

Keling, React.memo samarali qo'llanilishi mumkin bo'lgan bir nechta real hayotiy stsenariylarni ko'rib chiqaylik:

1-misol: Ro'yxat Elementi Komponentini Optimizatsiya Qilish

Tasavvur qiling, sizda ko'p sonli ro'yxat elementlarini renderlaydigan ro'yxat komponenti bor. Har bir ro'yxat elementi prop sifatida ma'lumot oladi va uni aks ettiradi. Eslab qolishsiz, ro'yxat komponenti har safar qayta renderlanganda (masalan, ota-ona komponentidagi holat yangilanishi tufayli), barcha ro'yxat elementlari ham, hatto ularning ma'lumotlari o'zgarmagan bo'lsa ham, qayta renderlanadi.

Ro'yxat elementi komponentini React.memo bilan o'rash orqali siz keraksiz qayta renderlarning oldini olishingiz va ro'yxatning unumdorligini sezilarli darajada yaxshilashingiz mumkin.

2-misol: Murakkab Forma Komponentini Optimizatsiya Qilish

Bir nechta kiritish maydonlari va murakkab validatsiya mantig'iga ega bo'lgan forma komponentini ko'rib chiqing. Bu komponentni renderlash hisoblash jihatidan qimmat bo'lishi mumkin. Agar forma tez-tez qayta renderlansa, bu ilovaning umumiy unumdorligiga ta'sir qilishi mumkin.

React.memo dan foydalanib va forma komponentiga uzatiladigan proplarni ehtiyotkorlik bilan boshqarib (masalan, hodisa ishlovchilari uchun useCallback dan foydalanish), siz keraksiz qayta renderlarni minimallashtirishingiz va formaning unumdorligini yaxshilashingiz mumkin.

3-misol: Diagramma Komponentini Optimizatsiya Qilish

Diagramma komponentlari ko'pincha murakkab hisob-kitoblarni va renderlash mantig'ini o'z ichiga oladi. Agar diagramma komponentiga uzatiladigan ma'lumotlar tez-tez o'zgarmasa, React.memo dan foydalanish keraksiz qayta renderlarning oldini olishi va diagrammaning javob berish qobiliyatini yaxshilashi mumkin.

React.memo dan Foydalanish Bo'yicha Eng Yaxshi Amaliyotlar

React.memo afzalliklarini maksimal darajada oshirish uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Ilovangizni profillang: React.memo ni qo'llashdan oldin, unumdorlik muammolarini keltirib chiqaradigan komponentlarni aniqlash uchun React'ning Profiler vositasidan foydalaning. Bu sizga optimallashtirish harakatlaringizni eng muhim sohalarga qaratishga yordam beradi.
• Unumdorlikni o'lchang: React.memo ni qo'llaganingizdan so'ng, uning haqiqatan ham farq qilayotganiga ishonch hosil qilish uchun unumdorlikning yaxshilanishini o'lchang.
• Maxsus taqqoslash funksiyalaridan ehtiyotkorlik bilan foydalaning: Maxsus taqqoslash funksiyalaridan foydalanganda, ularning samarali ekanligiga va faqat tegishli xususiyatlarni taqqoslashiga ishonch hosil qiling. Taqqoslash funksiyasida qimmat operatsiyalarni bajarishdan saqlaning.
• O'zgarmas ma'lumotlar tuzilmalaridan foydalanishni o'ylab ko'ring: O'zgarmas ma'lumotlar tuzilmalari prop taqqoslashini soddalashtirishi va keraksiz qayta renderlarning oldini olishni osonlashtirishi mumkin. Immutable.js kabi kutubxonalar bu borada yordam berishi mumkin.
• useCallback va useMemo dan foydalaning: Memoizatsiya qilingan komponentlarga funksiyalar yoki murakkab qiymatlarni prop sifatida uzatishda keraksiz qayta renderlarning oldini olish uchun useCallback va useMemo dan foydalaning.
• Kod ichida obyekt yaratishdan saqlaning: Obyektlarni kod ichida (inline) prop sifatida yaratish memoizatsiyani chetlab o'tadi, chunki har bir render siklida yangi obyekt yaratiladi. Buning oldini olish uchun useMemo'dan foydalaning.

React.memo ga Alternativalar

React.memo komponentlarni eslab qolish uchun kuchli vosita bo'lsa-da, siz ko'rib chiqishingiz mumkin bo'lgan boshqa yondashuvlar mavjud:

• PureComponent: Klass komponentlari uchun PureComponent React.memo ga o'xshash funksionallikni ta'minlaydi. U qayta renderlashdan oldin proplar va holatni yuzaki taqqoslashni amalga oshiradi.
• Immer: Immer - bu o'zgarmas ma'lumotlar bilan ishlashni soddalashtiradigan kutubxona. U o'zgaruvchan API yordamida ma'lumotlarni o'zgarmas tarzda o'zgartirishga imkon beradi, bu React komponentlarini optimallashtirishda foydali bo'lishi mumkin.
• Reselect: Reselect - bu Redux uchun eslab qolingan selektorlarni ta'minlaydigan kutubxona. U Redux do'konidan ma'lumotlarni samarali ravishda olish va ushbu ma'lumotlarga bog'liq bo'lgan komponentlarning keraksiz qayta renderlanishining oldini olish uchun ishlatilishi mumkin.

Murakkab Masalalar

Context va React.memo ni Boshqarish

React Context'dan foydalanadigan komponentlar, hatto proplari o'zgarmagan bo'lsa ham, context qiymati o'zgarganda qayta renderlanadi. Bu React.memo dan foydalanganda muammo tug'dirishi mumkin, chunki agar context qiymati tez-tez o'zgarib tursa, memoizatsiya chetlab o'tiladi.

Buni hal qilish uchun, useContext hookini memoizatsiya qilinmagan komponent ichida ishlatishni va keyin tegishli qiymatlarni memoizatsiya qilingan komponentga prop sifatida uzatishni o'ylab ko'ring. Bu sizga qaysi context o'zgarishlari memoizatsiya qilingan komponentning qayta renderlanishini ishga tushirishini nazorat qilish imkonini beradi.

React.memo Muammolarini Tuzatish

Agar siz React.memo dan foydalanganda kutilmagan qayta renderlarga duch kelsangiz, tekshirishingiz mumkin bo'lgan bir nechta narsalar mavjud:

• Proplar haqiqatan ham bir xil ekanligini tekshiring: Proplarni tekshirish va ularning qayta renderdan oldin va keyin haqiqatan ham bir xil ekanligiga ishonch hosil qilish uchun console.log yoki tuzatuvchidan (debugger) foydalaning.
• Kod ichida obyekt yaratilishini tekshiring: Obyektlarni kod ichida (inline) prop sifatida yaratishdan saqlaning, chunki bu memoizatsiyani chetlab o'tadi.
• Maxsus taqqoslash funksiyangizni ko'rib chiqing: Agar siz maxsus taqqoslash funksiyasidan foydalanayotgan bo'lsangiz, uning to'g'ri amalga oshirilganligiga va faqat tegishli xususiyatlarni taqqoslashiga ishonch hosil qiling.
• Komponentlar daraxtini tekshiring: Komponentlar daraxtini tekshirish va qaysi komponentlar qayta renderlarga sabab bo'layotganini aniqlash uchun React'ning DevTools vositasidan foydalaning.

Xulosa

React.memo - bu React ilovalarida render unumdorligini optimallashtirish uchun qimmatli vositadir. Uning maqsadi, ishlatilishi va cheklovlarini tushunib, siz undan keraksiz qayta renderlarning oldini olish va ilovalaringizning umumiy samaradorligini oshirish uchun samarali foydalanishingiz mumkin. Uni oqilona ishlatishni, boshqa optimallashtirish texnikalari bilan birlashtirishni va uning haqiqatan ham farq qilayotganiga ishonch hosil qilish uchun har doim unumdorlik ta'sirini o'lchashni unutmang.

Komponentlarni eslab qolish texnikalarini ehtiyotkorlik bilan qo'llash orqali siz yaxshiroq foydalanuvchi tajribasini taqdim etadigan silliqroq va sezgirroq React ilovalarini yaratishingiz mumkin.

Qo'shimcha O'qish va Manbalar

• React.memo Hujjatlari
• React'da Unumdorlikni Optimizatsiya Qilish
• useMemo va useCallback